<template>
    <div>
        <div id="courseList">
          <el-table
                :data="courselist"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="teacherId"
                    label="授课老师id">
                </el-table-column>
                <el-table-column
                    prop="classTime"
                    label="上课时间">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                  :filters="[{ text: '考试', value: '1' }, { text: '考察', value: '0' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.type == '1' ? 'primary' : 'success'"
                      disable-transitions>{{scope.row.type == '1' ? '考试' : '考察'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button type="primary" @click="selectCourse(scope.row.id)">选课</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style lang="less">

</style>

<script>
import { getAllCouse, selectCourse } from '@/api/couser'
import { getInfo } from '@/utils/storage'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      user: getInfo(),
      courselist: []
    }
  },
  methods: {
    filterTag (value, row) {
      return row.type === value
    },
    async selectCourse (id) {
      const res = await selectCourse(this.user.id, id)
      Message.success(res.data)
    }
  },
  mounted: async function () {
    this.courselist = (await getAllCouse()).data
  }
}
</script>
